<style lang="scss" scoped>
@import '@/assets/css/variable';
.courseContainer{
	width: 100%;
	background-color: $bgw;
	min-height: 100%;
	font-size: 1.2rem;
	overflow-y: scroll;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: $main-bgc-gray;
	.menu{
		height: 50px;
		border-bottom: 1px solid #f7f7f7;
		box-shadow: 2px 2px 2px #e7e7e7;
	}
	.list {
		// padding-bottom: 1rem;
		background-color: $main-bgc-gray;
		padding-top: 1rem;
		overflow-y: scroll;
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		.item {
			margin-bottom: 1rem;
			margin-left: 1rem;
			margin-right: 1rem;
			padding: 0.8rem 0.8rem;
			background-color: white;
			border-radius: 0.8rem;
			position: relative;
			overflow: hidden;
			.rightImg{
				position: absolute;
				right: -1.2rem;
				top: -1.2rem;
			}
			.flex2 {
				display: flex;
				padding-bottom: 0.8rem;
				.flex2-left {
					flex: 0 0 80px;
					height: 70px;
					border-radius: 0.6rem;
					overflow: hidden;
					position: relative;
					.tag{
						background-color: #FE280B;
						padding: 0.2rem 0.5rem;
						border-bottom-left-radius: 0.8rem;
						color:white;
						position: absolute;
						right: 0;
						top: 0;
						border: 0.1rem solid white;
						.text{
							font-size: 12px;
							transform: scale(0.8); //缩放0.8倍
							color:white;
							display: block;
						}
					}
				}
				.flex2-right {
					margin-left: 0.8rem;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					
					.title {
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 设置行数 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						color: $color0;
						font-size: 1.6rem;
						line-height: 1.2em;
						width: 90%;
					}
					.desc {
						span {
							color: $color2;
	
							&.split {
								font-size: 1rem;
							}
						}
					}
					.badgeBox {
						padding-bottom: 0.4rem;
						margin-top: 0.6rem;
						.badge {
							padding: 0.2rem 1rem;
							font-size: 1.2rem;
							background-color: #FFECDC;
							color: #FF6D00;
							border: 0.1rem solid #FF6D00;
							border-radius: 0.3rem;
							box-sizing: border-box;
							overflow: hidden;
						}
						.badge4status {
							padding: 0.2rem 1rem;
							font-size: 1.2rem;
							background-color: #E8E9E9;
							color: #999;
							border: 0.1rem solid #999;
							border-radius: 0.3rem;
							box-sizing: border-box;
							overflow: hidden;
						}
					}
				}
			}
			.flex3{
				padding: 0.8rem 0.8rem 0 1.2rem;
				text-align: right;
				overflow: hidden;
				border-top: 1px solid #f7f7f7;
				.btn{
					width: 6.4rem;
					height: 2.6rem;
					line-height: 2.6rem;
					float: right;
				}
			}
		}
	}
}
.itemContainer {
	padding: 1rem;
	overflow: hidden;
	width:100%;
	box-sizing: border-box;
	display: flex;
	text-align: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	span{
		margin-right: 1rem;
		padding: .8rem 1rem;
		border-radius: 0.6rem;
		font-size: 1.2rem;
		&.active{
			background-color: $mainColor;
			color:white;
		}
	}
}
.itemContainers {
	padding: 0rem 1.6rem 1rem 1.6rem;
	font-size: 2rem;
	.item {
		margin-top: 1.5rem;
		&:first-child{
			margin-top: 0;
		}
		.type{
			font-size: 1.6rem;
			color:$color1;
		}
		.textBox{
			display: flex;
			text-align: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			span {
				margin-right: 1rem;
				padding: 0.6rem 1rem;
				border-radius: 0.6rem;
				font-size: 1.4rem;
				margin-top: 1rem;
				&.active{
					background-color: $mainColor;
					color:white;
				}
			}
		}
	}
}
.van-ellipsis {
	color: $mainColor;
}
</style>

<template>
	<div class="courseContainer">
		<div class="menu">
			<van-dropdown-menu active-color="#4970FD">
				<van-dropdown-item
					:title="text1"
					ref="item1"
				>
				<div class="itemContainer">
					<span :class="index===active1?'active':''" v-for="(item,index) in option1" :key="index" @click="clickOption1(item)">{{item.text}}</span>
				</div>
				</van-dropdown-item>
				<van-dropdown-item
					:title="text2"
					ref="item2"
				>
				<div class="itemContainer">
					<span :class="index===active2?'active':''" v-for="(item,index) in option2" :key="index" @click="clickOption2(item)">{{item.text}}</span>
				</div>
				</van-dropdown-item>
				<van-dropdown-item
					:title="text3"
					ref="item3"
				>
				<div class="itemContainers">
					<div class="item" v-for="(item, index) in option3" :key="index">
						<div class="type" v-if="item.type!='全部'">{{item.type}}:</div>
						<div class="textBox">
							<span :class="items.id===active3?'active':''" v-for="(items, index) in item.children" :key="index" @click="clickOption3(items)">{{items.name}}</span>
						</div>
					</div>
				</div>
				<!-- <div class="itemContainer">
						<span :class="index===active3?'active':''" v-for="(item,index) in option_act[0].children" :key="index" @click="clickOption2(item)">{{item.text}}</span>
				</div> -->
				</van-dropdown-item>
				<van-dropdown-item
					 title="时间"
					 ref="item4"
				>
				<div class="itemContainer">
					<span :class="index===active4?'active':''" v-for="(item,index) in option4" :key="index" @click="clickOption4(item)">{{item.text}}</span>
				</div>
				</van-dropdown-item>
			</van-dropdown-menu>
		</div>
		<div class="list" v-if="courseData">
			<van-list
			  v-model="loading"
			  :finished="finished"
			  finished-text="没有更多了"
			  @load="CoursesPages"
			  offset="100"
			>
				<div class="item" v-for="(item,index) in courseData" :key="item.id"  @click="toDetailView(item,'course')">
					<img class="rightImg" v-if="item.status==1" src="../../assets/img/yishangjia.svg" width="60" height="60">
					<img class="rightImg" v-else src="../../assets/img/yixiajia.svg" width="60" height="60">
					<!-- <van-image width="80" height="70" fit="cover" src="../../"/> -->
					<div class="flex2">
						<div class="flex2-left">
							<van-image width="80" height="70" fit="cover" :src="item.images"/>
							<div class="tag" v-if="item.type==2">
								<span class="text">线下课</span>
							</div>
						</div>
						<div class="flex2-right">
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span>{{item.teacher||'测试数据'}}</span>
								<span class="split margL-l">|</span>
								<span class="margL-l">共{{item.course_duration}}节课时</span>
							</div>
							<div class="badgeBox"><span class="badge">{{item.sortname}}</span></div>
						</div>
					</div>
					<div class="flex3">
						<van-button class="btn" plain type="info" size="mini" v-if="item.status==1"  @click.stop='xiajia(item,index)'>下架</van-button>
						<van-button class="btn" type="info" size="mini" v-else @click.stop='shangjia(item,index)'>重新上架</van-button>
					</div>
				</div>
			</van-list>
			<!-- <div v-if="finished==false">
			  <div class="load-more color-l padding-all-m margB-l" @click="CoursesPages">加载更多</div>
			  
			</div>
			<div class="no-data color-l padding-all-m" v-if="finished">已经到底了</div> -->
		</div>
	</div>
</template>

<script>
import {Dialog,Toast} from 'vant';
import {myMixins} from "@/assets/js/mixins.js"
export default {
	mixins: [myMixins],
	name: 'course',
	data() {
		return {
			active1: '',
			active2: '',
			active3: '',
			active4: '',
			textStatus: 0,
			text1: '状态',
			text2: '类型',
			text3: '分类',
			text4: '时间',
			option_act: null,
			courseData: '',
			option1: [
				{ text: '全部', value: 0 },
				{ text: '已上架', value: 1 },
				{ text: '已下架', value: 2 },
			],
			option2: [
				{ text: '全部', value: 0 },
				{ text: '线上课', value: 1 },
				{ text: '线下课', value: 2 },
			],
			option3: [
				{ 
					type: '全部',
					children: [
						{ name: '全部', id: 0}
					]
				},
				{
					type: '线上课',
					children: [
						{ name: '教育学', id: '2-1'},
						{ name: '文学', id: '2-2'},
						{ name: '历史学', id: '2-3'},
						{ name: '艺术学', id: '2-4'},
						{ name: '哲学', id: '2-5'},
						{ name: '法学', id: '2-6'},
						{ name: '经济学', id: '2-7'},
						{ name: '其他', id: '2-8'}
					]
				},
				{
					type: '线下课',
					children: [
						{ name: '文化生活', id: '1-1'},
						{ name: '生活技艺', id: '1-2'},
						{ name: '医疗保健', id: '1-3'},
						{ name: '安全教育', id: '1-4'},
						{ name: '家庭教育', id: '1-5'},
						{ name: '法律维权', id: '1-6'},
						{ name: '公民意识', id: '1-7'},
						{ name: '其他', id: '1-8'}
					]
				},
			],
			option4: [
				{ text: '全部', value: 0},
				{ text: '一星期内', value: 1},
				{ text: '一个月内', value: 2},
				{ text: '一年内', value: 3},
			],
			userInfo:'',
			pageNo:1,
			pageSize: 10,
			loading: false,
			finished: false,
			fromView:''
		}
	},
	watch: {
		// 监视是否选择了
		textStatus(newValue) {
			this.option_act = this.option3.filter(item => {
				if(newValue === item.value) {
					return item
				}
			})
			console.log(this.option_act)
		}
	},
	mounted() {
		
		this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
		// this.courseData = this.$store.state.courseData
		this.CoursesortPage()
		this.CoursesPages()
	},
	methods: {
		CoursesortPage() {
			let params = {
				pageNo: this.pageNo,
				pageSize: 20
			}
			this.$request.CoursesortPage(params).then(res=>{
				// Dialog({ message: '提示' });
				console.log("CoursesortPage",res)
				if(res.ret==200){
					const sortList = res.data.data
					console.log("sortList",sortList)
					const option3 = this.option3
					console.log('sortList.filter(item=>item.type==1)',sortList.filter(item=>item.type==1))
					option3[1].children = sortList.filter(item=>item.type==1)
					option3[2].children = sortList.filter(item=>item.type==2)
					console.log("option3",option3)
					this.option3 = option3
					this.$forceUpdate()
				}
				// else{
				// 	Dialog({ title:'系统提示', message: res.msg });
				// }
			})
		},
		getDay(active) {
			if(active==1){
				return 7
			}else if(active==2){
				return 30
			}else if(active==3){
				return 365
			}else{
				return ''
			}
		},
		CoursesPages() {
			const  _this = this
			let params = {
				time:this.getDay(this.active4),
				sort:this.active3,
				type:this.active2,
				status: this.active1,
				pageNo:this.pageNo,
				pageSize:this.pageSize
			}
			this.loading = true
			this.$request.CoursesPages(params).then(res=>{
				// Dialog({ message: '提示' });
				if(res.ret==200){
					let courseData = this.courseData || [];
					courseData.push(...res.data.data)
					this.courseData = courseData
					console.log('_this.pageNo',_this.pageNo)
					console.log('(Math.floor(res.data.totalCount/this.pageSize) + 1)',(Math.floor(res.data.totalCount/this.pageSize) + 1))
					if(_this.pageNo >= (Math.floor(res.data.totalCount/this.pageSize) + 1)){
					  _this.finished = true;
					  console.log('_this.finished',_this.finished)
					  // _this.$store.commit('setCaseListFinished', true);
					}else{
					  _this.pageNo++
					}
					// _this.$store.commit('setCaseList', _this.caseList);
				}
				// else{
				// 	Dialog({ title:'系统提示', message: res.msg });
				// }
			}).finally(()=>{
				this.loading = false
			})
		},
		shangjia(item,index) {
			const _this = this
			const masterColor = _this.$store.state.masterColor
			console.log("_this.$store.state.masterColor",_this.$store.state.masterColor)
			Dialog.confirm({
			  title: '重新上架',
			  message: '是否确定重新上架本课程？',
			  confirmButtonColor: masterColor
			}).then(() => {
				// on confirm
				this.shangxiajia(item,index)
			  }).catch(() => {
				// on cancel
			  });
		},
		xiajia(item,index) {
			const _this = this
			const masterColor = _this.$store.state.masterColor
			console.log("_this.$store.state.masterColor",_this.$store.state.masterColor)
			Dialog.confirm({
			  title: '下架确认',
			  message: '是否确定下架本课程？',
			  confirmButtonColor: masterColor
			}).then(() => {
				// on confirm
				this.shangxiajia(item,index)
			  }).catch(() => {
				// on cancel
			  });
		},
		shangxiajia(item,index) {
			
			let params = {
				id: item.id,
				type: item.type,
				status: item.status,
				campus: this.userInfo.campus_id,
				user_type: item.user_type
			}
			this.$request.CoursesSaves(params).then(res=>{
				// Dialog({ message: '提示' });
				console.log("CoursesPages",res)
				if(res.ret==200){
					// this.courseData = res.data.data
					let courseData = this.courseData
					Toast.success('操作成功');
					courseData[index].status = courseData[index].status==1?2:1
					this.courseData = courseData
					console.log("courseData",this.courseData)
					this.$forceUpdate()
				}
			})
		},
		clickOption1(item) {
			this.active1 = item.value
			this.text1 = item.text
			console.log('----------------------', item.value)
			this.$refs.item1.toggle();
			this.pageNo = 1
			this.courseData = []
			this.CoursesPages()
		},
		clickOption2(item) {
			this.active2 = item.value
			this.text2 = item.text
			// this.textStatus = item.value
			this.$refs.item2.toggle();
			console.log('----------------------', item.value, item.text)
			this.pageNo = 1
			this.courseData = []
			this.CoursesPages()
		},
		clickOption3(item) {
			this.active3 = item.id
			this.text3 = item.name
			this.$refs.item3.toggle();
			console.log('----------------------', item.id, item.name)
			this.pageNo = 1
			this.courseData = []
			this.CoursesPages()
		},
		clickOption4(item) {
			this.active4 = item.value
			this.text4 = item.text
			this.$refs.item4.toggle();
			console.log('----------------------', item.value, item.text)
			this.pageNo = 1
			this.courseData = []
			this.CoursesPages()
		},
	}
}
</script>